<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>

    <script src="./../vue/vue.js"></script>

    <style>
        .template{
            border: 1px solid red;
        }
        
    </style>
</head>
<body>

    <!-- 
        v-if 使用 v-if 来判断是否显示某个元素
            1、<template> 标签来分组 template 是不可见的元素，给template添加样式都无效
            2、v-if
            3、v-else-if
            4、v-else

            5、用 key 管理可复用的元素
                并没有对input标签直接进行复用。
            6、v-show 用来隐藏元素，


     -->

    <div id="app">

        <h1 v-if="showH1">标题</h1>
        <h3 v-else>标题</h3>


        <div>
            <!-- 这里给template 添加样式是无法显示的，因为template在DOM中不渲染 -->
            <template class="template" v-if="showFirst">
                <div>这是第一组</div>
                <a href="#">链接</a>
            </template>
            <template v-else>
                <div>这是第二组</div>
                <a href="#">链接</a>
            </template>
        </div>

        <!-- 使用key 来防止元素复用 -->
        <div>
            <template v-if="showTemplateKey==1">
                <!-- <div> -->
                    <div>输入1</div>
                    <input type="text" placeholder="输入1" key="input1">
                <!-- </div> -->
            </template>
            <template v-else>
                <!-- <div> -->
                    <div>输入2</div>
                    <input type="text" placeholder="输入2" key="input2">
                <!-- </div> -->
            </template>
            <div>
                <button @click="onClickButton">点击</button>
            </div>
        </div>

        <!-- v-if vs v-show -->
        <div>
            <div>
                <div v-if="ifFirst">1</div>
                <div v-else>2</div>
            </div>

            <div>
                <div v-show="false">3</div>
                <div>4</div>
            </div>
        </div>




    </div>

    <script>

        let vm = new Vue({
            el: "#app",
            data: {
                params: "",
                watchParams: "",
                showH1: true,
                showFirst: true,
                showTemplateKey: 1,

                ifFirst: true
            },
            computed: {
                computedParams: {
                    get: function(){
                        return this.params
                    },
                    set: function(value){
                        this.params = value
                    }
                }
            },
            watch:{
                watchParasm: function(newValue,oldValue){

                }
            },
            methods: {
                onClickButton(){
                    if(this.showTemplateKey == 1){
                        this.showTemplateKey = 2
                    }else{
                        this.showTemplateKey = 1
                    }
                }
            },
        })

    </script>
    
</body>
</html>